<div class="hero-2-v3 relative p-y-md overflow-hidden">
  <div class="hero-body text-center flex flex-wrap justify-center items-center">
    @if (content.text) {
      <app-text [attr.data-path]="'text'" [content]="content.text" />
    }
    <div class="box m-top-md flex flex-wrap justify-center items-center basis-full">
      @for (item of content.elements; track item; let i = $index) {
        <div class="item basis-1/2 sm:basis-4/12 md:basis-2/12">
          <div class="card m-y-xs m-x-xs flex flex-col justify-center items-center">
            <div class="card-inner p-y-sm p-x-sm">
              <div class="card-media flex justify-center items-center">
                <app-img [attr.data-path]="'elements.' + i + '.img'" [content]="item.img" />
              </div>
              <div class="card-content m-top-sm">
                <h3 class="title mat-h3 font-bold m-bottom-0 text-center">
                  <app-link
                    [attr.data-path]="'elements.' + i"
                    [content]="item.link"
                    class="line-clamp-1"
                  />
                </h3>
              </div>
            </div>
          </div>
        </div>
      }
    </div>
  </div>
  @if (content.shape) {
    <app-shape />
  }
</div>
